<template>
    <div class="card">
        <div style="display: flex;">
            <el-input v-model="data.search" placeholder="请输入费款属期查询" style="width: 30%;"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load()">查询</el-button>
            <el-button style="margin-left: 10px;" @click="reset()">重置</el-button>
        </div>
        
        <el-table :data="data.pensionList" stripe :default-sort="{ prop: 'pensionTime', order: 'descending' }">
            <el-table-column label="征集流水号" prop="serialNumber" />
            <el-table-column label="税务机关名称" prop="taxAuthority" />
            <el-table-column label="缴纳日期" prop="pensionTime" sortable />
            <el-table-column label="应缴金额" prop="pensionMoney" />
            <el-table-column label="费款属期" prop="pensionTerm" />
        </el-table>
        <div style="margin-top: 15px;">
            <el-pagination v-model:current-page="data.pageNumber" v-model:page-size="data.pageSize"
                :page-sizes="[1, 5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                @size-change="load()" @current-change="load()" />
        </div>
    </div>
</template>
<script setup>
import request from '@/utils/request';
import { reactive } from 'vue';

const data = reactive({
    pageNumber: 1,
    pageSize: 5,
    total: 0,
    pension: {
        pensionId: "",
        pensionTerm: "",
        pensionTime: "",
        pensionMoney: "",
        enterpriseId: localStorage.getItem('enterprise') ? JSON.parse(localStorage.getItem('enterprise')).enterpriseId : "",
        taxAuthority: "",//税务机关名称
        serialNumber: "",//自动生成，就是企业缴纳社保记录的id，规则为TS(唐山市)YL(养老)20250328(日期)0001
    },
    pensionList: [],//用于表格展示数据
    search: "",//用于搜索
})


const load = () => {//加载所有记录
    request.get('/pension/searchEnterprisePage', {
        params: {
            pageNumber: data.pageNumber,
            pageSize: data.pageSize,
            enterpriseId: data.pension.enterpriseId,
            pensionTerm: data.search?data.search:"",
        }
    }).then(res => {
        data.pensionList = res.data.list
        data.total = res.data.total
    })
}
load()
const reset = () => {
    data.search = ""
    data.pageNumber = 1
    load()
}


</script>

<style scoped></style>